<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./plugins/jquery.min.js"></script>
    <script src="../static/axios.js"></script>
    <style>
        .layout {
            display: flex !important;
        }

        .ModelClass {
            margin-left: 50px;
        }

        .ModelClass1 {
            margin-top: 20px;
        }

        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            width: 400px;
            height: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #popup-div {
            width: 100%;
            height: 15%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #popup-div2 {
            width: 100%;
            height: 15%;
            display: flex;
        }

        #close-button {
            width: 20%;
            text-align: left;
        }

        #popup h2,
        #popup p {
            margin-top: 0;
        }

        #close-button:hover {
            color: #0052a3;
            cursor: pointer;
        }

        /* 模态背景 */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            display: none;
        }

        .modal-content {
            width: 300px;
        }

        .pStyle {
            width: 178px;
            height: 20px;
            background-color: #ccc;
            margin: 0;
        }
    </style>

</head>

<body>
    <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
        <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
            <div class="container-fluid height-100-per print-content">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-9 col-md-10">
                                <div class="hiprint-toolbar" style="margin-top:15px;">
                                    <ul>
                                        <li>
                                            <a class="btn hiprint-toolbar-item "
                                                style="color: #fff;background-color: #d9534f;border-color: #d43f3a;"
                                                id="A4_preview">快速预览</a>
                                        </li>
                                        <li>
                                            <a id="A4_directPrint" class="btn hiprint-toolbar-item "
                                                style="color: #fff;background-color: #d9534f;border-color: #d43f3a;">打印</a>
                                        </li>
                                    </ul>
                                    <div style="clear:both;"></div>
                                </div>
                                <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">

                                </div>

                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </content>
        <div class="ModelClass">
            <div class="ModelClass1">
                <p class="pStyle">开始匹号: </p><input type="text" id="inptText2" disabled
                    style="background-color: #fff;border-color: #000;">
            </div>
            <div class="ModelClass1">
                <p class="pStyle">打印数量: </p><input type="text" id="inptText3">
            </div>
        </div>
    </layout>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">打印预览</h4>
                </div>

                <div class="modal-body">
                    <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                    <div class="prevViewDiv"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
    <script src="custom_test/custom-etype-provider.js"></script>
    <script src="custom_test/custom-print-json.js"></script>
    <script src="custom_test/print-data.js"></script>
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script>
        var tokens = sessionStorage.getItem('USER-TOKEN-KEY')
        let baseURL
        let host = window.location.host
        let reg = /^localhost+/
        if (reg.test(host)) {
            baseURL = 'http://localhost:8222/api'
        } else {
            baseURL = '/api'
        }
        const service = axios.create({
            baseURL,
            timeout: 10 * 60 * 1000,
            withCredentials: true, // 跨域请求时发送cookie
        })
        service.interceptors.response.use((res) => {
            return res.data
        })
        var post = (op) => {
            return service.post(op.url,
                op.data, {

                headers: {
                    token: tokens
                }
            }
            )
        }
        var hiprintTemplate;
        var printDatas;
        var jbhIndex;
        var printDatasList = [];
        $(document).ready(function () {
            $("#popup").hide();
            $("#overlay").hide();
            const paramsString = window.location.search;
            const searchParams = new URLSearchParams(paramsString);
            hiprint.init({
                providers: [new customElementTypeProvider()]
            });

            hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));

            hiprintTemplate = new hiprint.PrintTemplate({
                template: JSON.parse(JSON.parse(searchParams.get('modelData')).detail),
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            });
            hiprintTemplate.design('#hiprint-printTemplate');
            $('#A4_preview').click(function () {
                $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml(printDatasList))
                $('#myModal').modal('show')
            });
            
            $('#A4_directPrint').click(function () {
                post({
                    url:'planSingle/clothfiy/addOem',
                    data:printDatasList
                }).then((res)=>{
                   if(res.code == 200){
                    alert('数据返回成功不可撤销')
                    hiprintTemplate.print(printDatasList);
                    $('#select').val('')
                    $('#inptText2').val('')
                    $('#inptText3').val('')
                   }
                })
            });
            console.log(printDatasList,'222222222');
            $('#A4_printByHtml').click(function () {
                // post({
                //     url:'planSingle/clothfiy/addOem',
                //     data:printDatasList
                // }).then((res)=>{
                //    if(res.code == 200){
                //     alert('数据返回成功不可撤销')
                //     hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
                //     $('#select').val('')
                //     $('#inptText2').val('')
                //     $('#inptText3').val('')
                //    }
                // })
            })
            $('#A4_getJson_toTextarea').click(function () {
                $('#A4_textarea_json').html(JSON.stringify(hiprintTemplate.getJson()))
                console.log(JSON.stringify(hiprintTemplate.getJson()))
                var text1 = $('#inptText1').val();
                var text2 = $('#inptText2').val();

            })
            $('#A4_getJson_toDesign').click(function () {
                hiprintTemplate = new hiprint.PrintTemplate({
                    template: JSON.parse($('#A4_textarea_json').val()),
                    settingContainer: '#PrintElementOptionSetting',
                    paginationContainer: '.hiprint-printPagination'
                });
                $('#hiprint-printTemplate').html('');
                hiprintTemplate.design('#hiprint-printTemplate');
            })
            $('#A4_getHtml_toTextarea').click(function () {
                $('#A4_textarea_html').val(hiprintTemplate.getHtml(printData)[0].outerHTML)
            })
            $("#close-button, #overlay").click(function () {
                $("#popup").hide();
                $("#overlay").hide();
            });
            const select = $('#select');
            select.focus(function () {
                select.html('')
                post({
                    url: 'planSingle/clothfiy/getMachineCodeList',
                    data: {
                        "planOrderCode": searchParams.get('jhd')
                    }
                }).then((res) => {
                    $.each(res.data, function (i, item) {
                        const option = $('<option>').text(item.machineCode);
                        select.append(option);
                    });
                })
            })
            window.addEventListener('load', (event) => {
                post({
                    url: 'planSingle/clothfiy/getClothfiyOem',
                    data: [
                        {
                            planOrderCode: searchParams.get('jhd'),
                            oemOrder:searchParams.get('oemCode'),
                            // machineCode: text
                        }
                    ]
                }).then((resz) => {
                    console.log(resz)
                    printDatas = resz.data[0]
                    $("#inptText2").val(resz.data[0].horseNo)
                    jbhIndex = resz.data[0].machineGreyCode
                    for (let item in printDatas) {
                        if (item == 'yarnList') {
                            //"yarnBatch" 纱牌
                            //"brandName" 纱批
                            printDatas['yarnList'].forEach(resc => {
                                printDatas['yarnBatch'] += resc.yarnCard + '\n'
                                printDatas['brandName'] += resc.batch + '\n'
                            });
                        }
                    }
                    printDatas['qrcode'] = '12345678789123456'
                    printDatas['barcode'] = '12345678789123456'
                }).catch((err)=>{
                    console.log(err)
                })
            });
            $("#inptText3").blur(function () {
                post({
                    url: 'planSingle/clothfiy/getQRAndBarCodeOem',
                    data: {
                        planOrderCode: searchParams.get('jhd'),
                        machineCode: select.val(),
                        startHorseNo: $('#inptText2').val(),
                        printNum: Number($("#inptText3").val())
                    }
                }).then((res) => {
                    printDatasList = []
                    for (let i = 0; i < Number($("#inptText3").val()); i++) {
                        printDatasList.push(JSON.parse(JSON.stringify(printDatas)))
                    }
                    let indexIN = $('#inptText2').val()
                    jbhIndex = printDatas.machineGreyCode
                    printDatasList.forEach((items, indexs) => {
                        items['qrcode'] = `{"clothfiyCode":"${res.data[indexs].clothfiyCode}"}`//二
                        items['barcode'] = res.data[indexs].barCode//一
                        items['clothfiyCode'] = res.data[indexs].clothfiyCode//二
                        items['horseNo'] = (indexIN++) + ''
                        items['machineGreyCode'] = (jbhIndex++) +''
                        delete items['id']
                    })
                })
            })
        });

        //调整纸张
        var setPaper = function (paperTypeOrWidth, height) {
            hiprintTemplate.setPaper(paperTypeOrWidth, height);
        }

        //旋转
        var rotatePaper = function () {
            hiprintTemplate.rotatePaper();
        }
        var clearTemplate = function () {
            hiprintTemplate.clear();
        }

        var selectTextClick = function () {
            $("#popup").show();
            $("#overlay").show();
        }

        var closeButton1 = function (e) {
            $('#qingSelectText').val(e.getAttribute("data-id"));
            $('#CsText').val(e.getAttribute("data-text"));
            $('.hiprint-option-item-submitBtn').click();
        }

    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#barcode_button_preview').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) });

                var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])

                $('#myModal .modal-body .prevViewDiv').html($html)
                $('#myModal').modal('show')
            });

            $('#barcode_button_print').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) });

                var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])
                barCodehiprintTemplate.printByHtml($html);

            });
        })
    </script>

</body>

</html>